<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
	<body>
		<!--请输入内容-->
		<input type"text" placeholder="请输入你的内容" />

		<button>发送请求</button>

		<!--显示结果-->
		<div>
			
		</div>

		<script charset="utf-8">
			var input =document.querySelector('input')
			var button = document.querySelector('button')
			var div = document.querySelector('div')
			//演示 websocket 在浏览器如何使用
			// 参数 : websocket 的服务地址
			var socket = new WebSocket('ws://localhost:3000')
			// 当 websocket 服务连接成功时触发
			socket.addEventListener('open', function() {
				div.innerHTML = '连接成功'
			})
			// 主动给 websocket 服务发送消息
			button.addEventListener('click', function() {
				var value = input.value
				socket.send(value)
				input.value = ''
			})

			// 接收 websocket 的数据
			socket.addEventListener('message', function(e) {
				console.log(e.data)
				var data = JSON.parse(e.data)
				var dv = document.createElement('div')
				dv.innerText = data.msg + '---' + data.time
				if (data.type === 1) {
					dv.style.color = 'green'
				} else if (data.type === -1) {
					dv.style.color = 'red'
				}
				div.appendChild(dv)
			})

			socket.addEventListener('close', function() {
				socket.send('离开聊天室')
			})
		</script>
	</body>
</html>
